<template>
  <div id="app">
    <img src="./assets/0.jpg" alt="">
    <!-- 图表盒子容器 -->
    <div class="container">
      <div class="row">
        <!-- 第一个图 -->
        <div id="myChart" :style="{width: '90%', height: '500px',margin:'0 auto'}"></div>
        <!-- 下面的文字盒子 -->
        <table class="luckytable">
          <tbody>
            <tr>
              <td class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                <span>一周</span>
              </td>
              <td class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                <span>一月</span>
              </td>
              <td class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                <span>全部</span>
              </td>
            </tr>
            <tr class="second">
              <td class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                <span>{{this.weekData}}</span>
              </td>
              <td class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                <span>{{this.monthData}}</span>
              </td>
              <td class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                <span>{{this.yearData}}</span>
              </td>
            </tr>
          </tbody>
        </table>
        <div id="myChart2" :style="{width: '90%', height: '500px',margin:'0 auto'}"></div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
import { week, month, all, monday } from "@/api/echarts";
import moment from "moment";
export default {
  name: "my_chart",
  data() {
    return {
      //获取接口数据
      dataArr: "",
      //X轴数据
      dateList: [],
      newDateList: [],
      //曲线数据
      valueList: [],
      // 一周最新数据
      weekData: "",
      //每月最新数据
      monthData: "",
      //年最新数据
      yearData: "",
      //monday数据
      mondayData: "",
      //monday,X轴数据
      mondayList: [],
      newMonday:[],
      //曲线数据
      mondayValue:[]
    };
  },
  created() {
     monday().then(res => {
      if(res.data.msg=='ok'){
        res.data.data.forEach(item=>{
          this.newMonday.push(moment(item.creatAt * 1000).format("YYYY.MM.DD"))
          this.mondayValue.push(parseInt(item.lucky * 100));
        })  
        this.mondayList=this.newMonday.sort()
        //倒叙
          console.log(this.mondayValue.reverse(), 4422);
      }
    })
    //每天的数据
    week().then(res => {
      this.weekData = parseInt(res.data.data[0].lucky * 100).toFixed(4) + "%";
    });
    //每月的数据
    month().then(res => {
      this.monthData = parseInt(res.data.data[0].lucky * 100).toFixed(4) + "%";
    });
    //all的数据
    all().then(res => {
      this.yearData = parseInt(res.data.data[0].lucky * 100).toFixed(4) + "%";
      //x轴数据
      if (res.data.msg == "ok") {
        this.dataArr = res.data.data;
        //  console.log(res.data.data,8899);
        this.dataArr.forEach(item => {
          this.newDateList.push(
            moment(item.creatAt * 1000).format("YYYY.MM.DD")
          );
          this.dateList = this.newDateList.sort();
        });
        // console.log(this.dateList,9900);
        // 曲线数据
        this.dataArr.forEach(item => {
          this.valueList.push(parseInt(item.lucky * 100));
          // this.valueList = this.newValueList;
        });
        //不能删，删了排序就错
        console.log(this.valueList.reverse(), 1122);
      }
    });
    //monday的数据请求
   
  },

  mounted() {
    this.drawLine();
    document.querySelector('body').style.margin=0;
  },
  watch: {
    dataArr(val) {
      //监听数据发生改变 刷新图表数据
      this.drawLine();
    }
  },
  methods: {
    drawLine() {
      // console.log(this.dataArr); // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart")); // 绘制图表
      let myChart2 = this.$echarts.init(document.getElementById("myChart2"));
      myChart.setOption({
        title: [
          {
            top: "1%",
            left: "center",
            text: "矿池累计幸运值曲线",
            textStyle: {
              fontWeight: 800,
              //字体大小
              fontSize: 20
            }
          },
          //一个月图
          {}
        ],
        tooltip: {
          trigger: "axis",
          formatter: "{b}<br/>{a} : {c}%"
        },
        xAxis: {
          data: this.dateList
        },
        yAxis: {
          min: 0,
          max: 120,
          nameGap: 30,
          name: "lucky%",
          nameRotate: "90",
          //名字居中
          nameLocation: "middle",
          splitNumber: 12,
          nameTextStyle: {
            color: "#338fd0",
            fontWeight: "400",
            fontSize: 16
          }
        },
        visualMap: {
          top: 10,
          right: 10,
          pieces: [
            {
              gt: 80,
              lte: 85,
              color: "#096"
            },
            {
              gt: 85,
              lte: 90,
              color: "#ffde33"
            },
            {
              gt: 90,
              lte: 100,
              color: "#ff9933"
            }
          ],
          outOfRange: {
            color: "#999"
          }
        },
        series: {
          name: "矿池幸运值",
          type: "line",
          showSymbol: false,
          smooth: true,
          data: this.valueList
        }
      });
      myChart2.setOption({
        title: [
          {
            top: "2%",
            left: "center",
            text: "过去半年每周一统计过去一周的幸运值曲线",
            textStyle: {
              fontWeight: 800,
              //字体大小
              fontSize: 20
            }
          },
          //一个月图
          {}
        ],
        tooltip: {
          trigger: "axis",
          formatter: "{b}<br/>{a} : {c}%"
        },
        xAxis: {
          data: this.mondayList
        },
        yAxis: {
          min: 0,
          max: 130,
          nameGap: 30,
          name: "lucky%",
          nameRotate: "90",
          //名字居中
          nameLocation: "middle",
          splitNumber: 12,
          nameTextStyle: {
            color: "#338fd0",
            fontWeight: "400",
            fontSize: 16
          }
        },
        visualMap: {
          top: 10,
          right: 10,
          pieces: [
            {
              gt: 0,
              lte: 30,
              color: "#096"
            },
            {
              gt: 30,
              lte: 60,
              color: "#ffde33"
            },
            {
              gt: 60,
              lte: 100,
              color: "#ff9933"
            },
            {
              gt: 100,
              lte: 120,
              color: "red"
            }
          ],
          outOfRange: {
            color: "#999"
          }
        },
        series: {
          name: "矿池幸运值",
          type: "line",
          showSymbol: false,
          smooth: true,
          data: this.mondayValue
        }
      });
      //单个的图表自适应
      window.onresize = myChart.resize;
      //多个页面
      window.onresize = function() {
        myChart.resize();
        myChart2.resize();
      };
    }
  }
};
</script>
<style lang="less" scoped>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
 
}
img{
  height: 160px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}
.container {
  //随时准备删的临时样式
  margin-top: 200px;
  .luckytable {
    width: 100%;
    margin-bottom: 50px;
    tbody {
      tr {
        td {
          span {
            display: inline-block;
            background-color: #8cc0e4;
            font-size: 16px;
            font-weight: 800;
            color: #fff;
            width: 25%;
          }
        }
      }
      .second {
        td {
          span {
            height: 20px;
            font-size: 14px;
            font-weight: 100;
            background-color: #fff;
            color: black;
          }
        }
      }
    }
  }
}
</style>
